<template>
  <!--
  查：
    1：定义api
    2:导入api
    3:调用获取数据存储并渲染
    4：与分页建立关联
       页码与接口传参关联
       页容量与接口传参关联
       total总数来自于接口返回值
       页码与页容量改变都重新请求

  增：
    1：创建新增弹框组件
    2：在父组件导入注册使用
    3：点击新增按钮打开弹框
    4：完成布局处理
    5：完成表单处理（表单数据，表单验证等）
    6：定义新增api
    7:导入新增api
    8:点击新增在表单验证通过后调用新增api
      调用成功
         a:提示
         b:关闭弹框
         c:清空表单数据与验证
         d:刷新父级列表数据

   删除：
    1：点击删除弹出确认框
    2:定义删除api
    3:导入删除api
    4:确认框点击确定后调用删除api
      调用成功
        提示
        刷新（页码>1 && 当前页只有一条数据     页码-- 再刷新）

    员工导出
     1：点击按钮调用接口获取所有员工列表数据
     2：导入相应的excel方法
     3:调用相应excel导出方法传入参数实现导出
       导出成功
          提示

     查看：
       1：创建查看页面
       2：配制路由
       3：点击查看跳转
       4：动态路由匹配传参(用户id)
       5:点击跳转到查看

     点击员工头像生成二维码（弹窗使用v-model）
       1:创建一个二维码弹框组件
       2：在父组件导入注册使用
       3：使用v-model控制弹框打开（点击头像打开）
       4：点击头像同时传入弹框组件头像地址
       5：弹框组件内生成二维码

    分配角色
      获取实例，v-model  .sync
      .sync
          子组件标签  :属性名="父组件属性" @update:属性名="父组件属性=$event"
          子组件内
            props:['属性名']
            this.$emit('update:属性名',实参值)

      1：创建一个分配角色弹框
      2：在父组件导入注册使用
      3：点击分配角色按钮打开弹框
      4:完成布局
      5：导入公司设置获取角色的api
      6:打开弹框时调用api获取数据
      7：存储并渲染
      8：导入获取员工详情的api
      9:打开弹框时调用接口获取详情数据
      10：存储并渲染
      11：定义分配角色的api
      12:导入分配角色api
      13:点击确定调用api
         调用成功
            a:提示
            b:关闭弹框
            c:清空表单已勾选数据
            d:是否要刷新父级列表（看父级有没有相应数据和展示）
 -->

  <div class="employees">
    <el-card>
      <div class="content">
        <div class="left">
          <i class="el-icon-info" />共{{ total }}条记录
        </div>
        <div class="right">
          <el-button size="small" type="danger" :loading="excelLoading" @click="outEmployees">简单表头导出</el-button>
          <el-button size="small" type="info">复杂表头导出</el-button>
          <el-button size="small" type="success" @click="$router.push('/employees/import')">excel导入</el-button>
          <!-- 增 addEvent 删 delEvent 改 editEvent 查 getData -->
          <!-- <el-button v-if="$store.state.user.userInfo.roles.points.includes('employees_add_btn')" size="small" type="primary" @click="addEvent">新增员工</el-button> -->
          <el-button v-if="setBtn('employees_add_btn')" size="small" type="primary" @click="addEvent">新增员工</el-button>
        </div>
      </div>
    </el-card>
    <el-card class="bottom">
      <el-table :data="list">

        <el-table-column label="序号" width="80px" fixed="left">
          <template #default="{$index}">
            <div>
              {{ (page.page-1)*page.size+$index+1 }}
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="username" label="姓名" sortable />
        <el-table-column prop="staffPhoto" label="头像">
          <template #default="{row}">
            <img v-errorimg class="avatar" :src="row.staffPhoto" alt="" @click="imgClick(row.staffPhoto)">
          </template>
        </el-table-column>
        <el-table-column prop="mobile" label="手机号" sortable width="120px" />
        <el-table-column prop="workNumber" label="工号" sortable />
        <!-- <el-table-column prop="formOfEmployment" label="聘用形式" sortable :formatter="employmentChange" /> -->
        <el-table-column prop="formOfEmployment" label="聘用形式" sortable>
          <template #default="{row}">
            <!-- v-指令名:属性名.修饰符=值 -->
            <div v-changestate:hireType="row.formOfEmployment" />
          </template>
        </el-table-column>
        <el-table-column prop="departmentName" label="部门" sortable />
        <el-table-column prop="timeOfEntry" label="入职时间" sortable />
        <!-- <el-table-column prop="enableState" label="帐户状态" sortable :formatter="stateChange" /> -->
        <el-table-column prop="enableState" label="帐户状态" sortable>
          <template #default="{row}">
            <div v-changestate:workingState="row.enableState">
              {{ row.enableState }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300px" fixed="right">
          <template #default="{row}">
            <div>
              <el-button type="text" @click="$router.push('/employees/look/'+row.id)">查看</el-button>
              <el-button type="text">转正</el-button>
              <el-button type="text">调岗</el-button>
              <el-button type="text">离职</el-button>
              <el-button type="text" @click="roleEvent(row)">角色</el-button>
              <!-- <el-button v-if="$store.state.user.userInfo.roles.points.includes('employees_del_btn')" type="text" @click="delEvent(row.id)">删除</el-button> -->
              <el-button v-if="setBtn('employees_del_btn')" type="text" @click="delEvent(row.id)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <!-- @size-change="handleSizeChange"
          @current-change="handleCurrentChange" -->
        <el-pagination
          background
          :current-page.sync="page.page"
          :page-sizes="[1,2,5,10,100, 200, 300, 400]"
          :page-size.sync="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="sizeChange"
          @current-change="getData"
        />
      </div>

    </el-card>

    <!-- 新增弹框组件 -->
    <!--
      获取组件实例 $ref $parent  $root $children
      父子传值  props $emit
      兄弟组件传值  $bus.$on   $bus.$emit   $bus.$off
      高阶向低阶传值  provide inject
      vuex
     -->
    <Add ref="add" @getData="getData" />
    <!-- 二维码弹框 -->
    <!-- <QrCode :value="showCode" @input="showCode=$event" /> -->
    <QrCode ref="code" v-model="showCode" />
    <!-- 分配角色 -->
    <!-- <SetRole :show-role="showRole" @update:showRole="showRole=$event" /> -->
    <SetRole ref="role" :show-role.sync="showRole" />
  </div>
</template>
<script>
import { sysUser, sysUserDelete } from '@/api/employees'
import employeesData from '@/api/constant/employees'
import jsCookie from 'js-cookie'
import Add from './components/add'
import QrCode from './components/QrCode.vue'
import SetRole from './components/setRole.vue'
// import { export_json_to_excel } from '@/vendor/Export2Excel'
export default {
  components: {
    Add,
    QrCode,
    SetRole
  },
  data() {
    return {
      showRole: false,
      showCode: false,
      list: [],
      excelLoading: false,
      page: {
        page: 1, //	是	1	页码
        size: +jsCookie.get('employees-size') || 1 //	是	10	每页条数
      },
      total: 100
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await sysUser(this.page)
      this.list = res.data.rows
      this.total = res.data.total
      console.log('员工列表', res)
    },
    // 聘用形式数据转换
    employmentChange(row, column, cellValue, index) {
      const findItem = employeesData.hireType.find(item => +item.id === +cellValue)
      return findItem ? findItem.value : '-'
    },
    // 状态数据转换
    stateChange(row, column, cellValue, index) {
      const findItem = employeesData.workingState.find(item => +item.id === +cellValue)
      return findItem ? findItem.value : '-'
    },
    sizeChange() {
      // 存储页容量
      jsCookie.set('employees-size', this.page.size)
      this.getData()
    },
    // 新增事件
    addEvent() {
      // 打开弹框
      this.$refs.add.isShow = true
    },
    // 删除事件
    async delEvent(id) {
      await this.$confirm('您确定删除该项吗?', '温馨提示')
      await sysUserDelete(id)
      this.$message.success('删除成功')
      if (this.page.page > 1 && this.list.length === 1) {
        this.page.page--
      }
      this.getData()
    },
    // 员工导出
    async  outEmployees() {
      this.excelLoading = true
      const importRes = await import('@/vendor/Export2Excel')
      console.log('import的then返回值', res)
      const res = await sysUser({
        page: 1,
        size: 99999999
      })

      const newData = res.data.rows.map((item, index) => {
        return [
          index + 1,
          item.username,
          item.staffPhoto,
          item.mobile,
          item.workNumber,
          this.employmentChange(null, null, item.formOfEmployment),
          item.departmentName,
          item.timeOfEntry,
          this.stateChange(0, 0, item.enableState)
        ]
      })
      importRes.export_json_to_excel({
        header: ['序号', '姓名', '头像', '手机号', '工号', '聘用形式', '部门', '入职时间', '状态'],
        data: newData,
        filename: '员工列表'
      })
      this.excelLoading = false
      this.$message.success('导出成功')
      console.log('员工列表', res)
    },
    // 头像点击
    imgClick(staffPhoto) {
      if (!staffPhoto) {
        return this.$message.error('没有图片地址生成不了二维码')
      }
      // 打开弹框
      this.showCode = true
      this.$nextTick(() => {
        // 调用子组件内的方法生成二维码
        this.$refs.code.createCode(staffPhoto)
      })
    },
    // 角色点击
    roleEvent(row) {
      // 打开弹框
      this.showRole = true
      // 调用方法获取角色列表
      this.$refs.role.getData()
      // 调用方法获取角色详情
      this.$refs.role.getRoleInfo(row.id)
      // console.log(row)
    }
  }
}
</script>
<style lang="scss" scoped>
.employees{
  padding:15px;
  .content{
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left{
      padding:8px;
      border:1px solid #bce5ff;
      background-color: #e6f7ff;
      i{
        color:#409eff;
        margin-right:5px;
      }
    }
  }
.bottom{
  margin-top:15px;
}
.page{
  padding:20px;
  text-align: center;
}
.avatar{
  width: 50px;
  height: 50px;
  object-fit: cover;
}
}
</style>
